<template>
	<div class="order-details padding20">
		<el-steps :active="step" align-center v-if="this.message.orderStatus != 1">
			<el-step title="买家下单" :description="message.createTime"></el-step>
			<el-step title="买家付款" :description="message.payTime"></el-step>
			<el-step title="商家发货" :description="message.dvyTime"></el-step>
			<el-step title="订单完成" :description="message.finishTime"></el-step>
		</el-steps>
		<el-steps :active="step" align-center v-else>
			<el-step v-if="message.orderInsideStatus == 1" title="订单关闭" description="用户取消"></el-step>
			<el-step v-else-if="message.orderInsideStatus == 2" title="订单关闭" description="超时取消"></el-step>
			<el-step v-else-if="message.orderInsideStatus == 3" title="订单关闭" description="退款完成"></el-step>
		</el-steps>
		<div class="details">
			<div class="item basis">
				<div class="order-no">订单编号: {{ message.orderNumber }}</div>
				<div class="status">
					当前状态: {{ formatDict(message.orderStatus, "status") }}
					<el-button
						v-if="message.orderStatus == 3"
						@click="onOpenShippingGoods('send')"
						style="margin-left: 15px"
						type="primary"
						size="mini"
					>
						确认发货
					</el-button>
					<el-button
						v-if="message.orderStatus == 4"
						@click="onConfirmReceipt"
						style="margin-left: 15px"
						type="warning"
						size="mini"
					>
						确认收货
					</el-button>
					<el-button @click="onOpenShippingGoods('cancel')" type="text" size="mini">取消发货</el-button>
				</div>
				<div class="title">基本信息</div>
				<div class="message">下单时间: {{ message.createTime }}</div>
				<div class="message">付款时间: {{ message.payTime }}</div>
				<div class="message">付款方式: {{ formatDict(message.payType, "OrderPayType") || "无" }}</div>
				<div class="message">订单编号: {{ message.orderNumber }}</div>
				<div class="tip">
					<img src="./img/tip.png" alt="" />
					友情提示: 交易成功，如买家有售后申请，请与买家进行协商，妥善处理
				</div>
			</div>
			<div class="item buyer">
				<div class="title">买家信息</div>
				<div class="message">收货人: {{ message.consignee }}</div>
				<div class="message">收货地址: {{ message.address }}</div>
				<div class="message">收货电话: {{ message.phone }}</div>
			</div>
			<div class="item logistics">
				<div class="title">物流信息</div>
				<div class="message">快递公司: 买家名称</div>
				<div class="message">快递单号: {{ message.expresssn }}</div>
				<div class="message">
					发货时间: {{ message.dvyTime }}
					<f-logistic ref="fLogisticRef">
						<el-button v-if="message.orderStatus == 4" type="text" size="mini">查看物流</el-button>
					</f-logistic>
				</div>
			</div>
		</div>
		<div class="table-title">商品信息</div>
		<el-table :data="message.goodsList">
			<el-table-column label="商品标题" prop="goodsName">
				<template #default="{row: {goodsName, goodsImg}}">
					<div class="goods">
						<img :src="goodsImg" alt="" style="width: 30px; height: 30px; object-fit: cover;" />
						<span class="name">{{ goodsName }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="规格、编号、条码" prop="specName"></el-table-column>
			<el-table-column label="单价" prop="goodsPrice"></el-table-column>
			<el-table-column label="数量" prop="goodsCount"></el-table-column>
			<el-table-column label="原价" prop="goodsTotalAmount"></el-table-column>
			<el-table-column label="折扣后" prop="goodsRealPrice"></el-table-column>
		</el-table>

		<div class="totals">
			<div class="money">商品小计: ￥{{ message.oldPrice }}</div>
			<div class="money">运费: ￥{{ message.dispatchPrice || 0 }}</div>
			<div class="money">
				折扣:
				<div class="red">-￥{{ message.couponAmount || 0 }}</div>
			</div>
			<div class="money">
				实付款:
				<div class="red">￥{{ message.price }}</div>
			</div>
		</div>
		<shipping-goods ref="shippingGoodsRef" :message="message" @onConfirm="onShippingConfirm"></shipping-goods>
	</div>
</template>

<script>
import ShippingGoods from "./shipping.vue"
import FLogistic from "./logistic.vue"
import request from "@/common/request"
import { enumList } from "@/api/public.api.js"

export default {
	name: "order-details",
	props: {},
	data() {
		return {
			message: {},
			channel: [],
			status: [],
			OrderPayType: [],
			OrderDelivery: [],
		}
	},
	computed: {
		step() {
			switch (+this.message.orderStatus) {
				case 2:
					return 1
				case 3:
					return 2
				case 4:
					return 3
				default:
					return 4
			}
		},
	},
	async created() {
		this.getMessage()

		try {
			const { code, data, msg } = await enumList("OrderChannel")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.channel = data
		} catch (error) {}
		try {
			const { code, data, msg } = await enumList("OrderStatus")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.status = data
		} catch (error) {}
		try {
			const { code, data, msg } = await enumList("OrderPayType")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.OrderPayType = data
		} catch (error) {}
		try {
			const { code, data, msg } = await enumList("OrderDelivery")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.OrderDelivery = data
		} catch (error) {}
	},
	methods: {
		async getMessage() {
			try {
				const { code, data, msg } = await request("get", "orders/goodsOrder/info?id=" + this.$route.query.id)
				if (code != 0) {
					throw new Error(msg)
				}
				this.message = data
			} catch (error) {
				this.$msg({
					type: "error",
					message: error,
				})
			}
		},

		onOpenShippingGoods(type) {
			this.$refs.shippingGoodsRef.show(type)
		},
		onShippingConfirm() {
			this.getMessage()
		},

		onConfirmReceipt() {
			this.$confirm("是否确认收货?", "提示", {
				confirmButtonText: "收货",
				cancelButtonText: "取消",
				type: "warning",
			}).then(async () => {
				try {
					const { code, msg } = await request("post", "/orders/goodsOrder/receipt", {
						id: this.message.id,
					})
					if (code == 0) {
						this.$message.success("收货成功")
						this.getMessage()
					} else {
						this.$message.error(msg)
					}
				} catch (error) {}
			})
		},

		onOpenFLogistic() {
			this.$refs.fLogisticRef.show()
		},

		formatDict(value, dictname) {
			const { name } = this[dictname].find(item => item.code == value) || {}
			return name
		},
	},
	components: {
		ShippingGoods,
		FLogistic,
	},
}
</script>

<style lang="scss" scoped>
.order-details {
	padding-top: 80px;
	padding-inline: 60px;
}
.details {
	margin-top: 40px;
	background: #f5fcfd;
	border: 1px solid #94dce8;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	.item {
		flex: 1;
		padding: 30px;
		padding-top: 92px;
		&:not(:last-child) {
			border-right: 1px solid #94dce8;
		}
		.title {
			padding-top: 30px;
			padding-bottom: 5px;
			font-weight: 700;
			font-size: 16px;
		}
		.message {
			line-height: 1.8;
			font-size: 16px;
			color: #666;
		}
	}
	.basis {
		padding-top: 30px;
		.order-no {
			font-size: 20px;
			padding-bottom: 6px;
			color: #333;
		}
		.status {
			color: #0cafcc;
			font-size: 14px;
		}
		.tip {
			padding-top: 60px;
			color: #999;
			font-size: 12px;
		}
	}
}
.table-title {
	font-size: 20px;
	font-weight: 700;
	padding-top: 40px;
	padding-bottom: 30px;
}
.totals {
	text-align: right;
	font-size: 14px;
	color: #666;
	padding-top: 25px;
	.money {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		line-height: 2;
	}
	.red {
		color: #e4393c;
	}
}
</style>
